<template>
  <div class="fixed inset-0 z-20 pointer-events-none"></div>
  <div class="w-full overflow-hidden relative">
    <!-- 左箭头 -->
    <button
      v-show="currentIndex > 0"
      @click="currentIndex--"
      class="absolute left-4 bottom-10 md:top-1/2 md:bottom-auto -translate-y-1/2 z-10 bg-white/30 p-2 rounded-full hover:bg-white/50 transition-colors"
    >
      <div class="text-bsr">
        <svg
          xmlns="http://www.w3.org/2000/svg"
          xmlns:xlink="http://www.w3.org/1999/xlink"
          aria-hidden="true"
          role="img"
          style="font-size: 2em"
          width="1em"
          height="1em"
          viewBox="0 0 24 24"
          data-v-4978fed5=""
        >
          <path
            fill="currentColor"
            d="M15.41 7.41L14 6l-6 6l6 6l1.41-1.41L10.83 12z"
          ></path>
        </svg>
      </div>
    </button>

    <!-- 右箭头 -->
    <button
      v-show="currentIndex < 3"
      @click="currentIndex++"
      class="absolute right-4 bottom-10 md:top-1/2 md:bottom-auto -translate-y-1/2 z-10 bg-white/30 p-2 rounded-full hover:bg-white/50 transition-colors"
    >
      <div class="text-bsr">
        <svg
          data-v-4978fed5=""
          xmlns="http://www.w3.org/2000/svg"
          xmlns:xlink="http://www.w3.org/1999/xlink"
          aria-hidden="true"
          role="img"
          width="1em"
          height="1em"
          viewBox="0 0 24 24"
          style="font-size: 2em"
        >
          <path
            fill="currentColor"
            d="M10 6L8.59 7.41L13.17 12l-4.58 4.59L10 18l6-6z"
          ></path>
        </svg>
      </div>
    </button>
    <!-- 主页面 -->
    <div
      @transitionend="handleTransitionEnd"
      class="flex transition-transform duration-500 select-none"
      :style="{ transform: `translateX(-${currentIndex * 100}%)` }"
    >
      <div class="min-w-full">
        <home-t1 class="w-full block"></home-t1>
      </div>
      <div class="min-w-full">
        <home-t2 class="w-full h-full block"></home-t2>
      </div>
      <div class="min-w-full">
        <home-t3 class="w-full h-full block"></home-t3>
      </div>
      <div class="min-w-full">
        <home-t4 class="w-full h-full block"></home-t4>
      </div>
    </div>
    <!-- 指示器按钮 -->
    <div
      class="hidden md:flex absolute bottom-10 left-1/2 transform -translate-x-1/2 space-x-2"
    >
      <button
        v-for="index in 4"
        :key="index"
        @click="switchPage(index - 1)"
        :class="[
          'w-3 h-3 md:w-7 md:h-7 rounded-full',
          currentIndex === index - 1 ? 'bg-bsr/90' : 'bg-white/60',
        ]"
      ></button>
    </div>
  </div>
  <Footer />
</template>

<script setup lang="ts">
const currentIndex = ref(0); // 当前显示的是第几张轮播图
const switching = ref(false); //是否正在滚动
//动画结束表示不在滚动中
function handleTransitionEnd() {
  switching.value = false;
}
const switchPage = (i: number) => {
  currentIndex.value = i;
};
</script>

<style scoped>
.flex {
  will-change: transform;
}
</style>

